<template>
  <div class="hello">
    <a-typography-title :level="1">{{ msg }}</a-typography-title>
    <a-typography-paragraph>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a-link
        href="https://cli.vuejs.org"
        target="_blank"
      >vue-cli documentation</a-link>.
    </a-typography-paragraph>
    
    <a-typography-title :level="3">Installed CLI Plugins</a-typography-title>
    <a-list item-layout="horizontal" :data-source="[
      {name: 'babel', url: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel'},
      {name: 'eslint', url: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint'}
    ]">
      <template #renderItem="{ item }">
        <a-list-item>
          <a-link :href="item.url" target="_blank">{{ item.name }}</a-link>
        </a-list-item>
      </template>
    </a-list>

    <a-typography-title :level="3">Essential Links</a-typography-title>
    <a-list item-layout="horizontal" :data-source="[
      {name: 'Core Docs', url: 'https://vuejs.org'},
      {name: 'Forum', url: 'https://forum.vuejs.org'},
      {name: 'Community Chat', url: 'https://chat.vuejs.org'},
      {name: 'Twitter', url: 'https://twitter.com/vuejs'},
      {name: 'News', url: 'https://news.vuejs.org'}
    ]">
      <template #renderItem="{ item }">
        <a-list-item>
          <a-link :href="item.url" target="_blank">{{ item.name }}</a-link>
        </a-list-item>
      </template>
    </a-list>

    <a-typography-title :level="3">Ecosystem</a-typography-title>
    <a-list item-layout="horizontal" :data-source="[
      {name: 'vue-router', url: 'https://router.vuejs.org'},
      {name: 'vuex', url: 'https://vuex.vuejs.org'},
      {name: 'vue-devtools', url: 'https://github.com/vuejs/vue-devtools#vue-devtools'},
      {name: 'vue-loader', url: 'https://vue-loader.vuejs.org'},
      {name: 'awesome-vue', url: 'https://github.com/vuejs/awesome-vue'}
    ]">
      <template #renderItem="{ item }">
        <a-list-item>
          <a-link :href="item.url" target="_blank">{{ item.name }}</a-link>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: {
      type: String,
      default: ''
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  padding: 20px;
}
.ant-typography {
  margin-bottom: 20px;
}
.ant-list {
  margin-bottom: 30px;
}
.ant-list-item {
  padding: 12px 0;
}
a-link {
  color: #1890ff;
}
a-link:hover {
  color: #40a9ff;
}
</style>
